<template>
    <div class="leftbar">
        <el-menu :default-active="$route.path" 
          class="el-menu-vertical-demo" 
          unique-opened router
          background-color="#000"
          text-color="#fff"
          active-text-color="#fff">
            <el-menu-item index="/">
                <i class="el-icon-menu"></i>
                <span slot="title">用户账号</span>
            </el-menu-item>
            <el-menu-item index="/info">
                <i class="el-icon-menu"></i>
                <span slot="title">用户KPI</span>
            </el-menu-item>
        </el-menu>
    </div>
</template>

<script>
    export default {
        name: "LeftBar",
        data: function() {
            return {}
        },
        computed: {
            onRoutes: function() {
                console.log(this.$route.path)
                return this.$route.path.replace("/", "")
            }
        }
    }
</script>

<style scoped>
    .leftbar {
        position: fixed;
        display: block;
        width: 200px;
        top: 50px;
        left: 0;
        bottom: 0;
    }
    .leftbar > ul {
        height: 100%;
    }

    .el-menu-item.is-active {
        background-color: darkred !important;
    }
</style>
